<template>
  <up-loading-page :loading="loading"></up-loading-page>
  <view v-if="!loading" class="container">
    <view v-if="answerList.length" class="subject">
        <view class="subject-item" v-for="(item,index) in answerList">
            <view class="subject-item-title text-[28rpx]">
                <up-tag class="mr-[10rpx]" :text="item.typename" size="mini" plain></up-tag>
                <text>{{index + 1}}、</text>
                <text>{{item.title}}</text>
            </view>
            <view>
                <view class="flex items-center option" v-for="(item2,index2) in item.xuanxiang" @click="handleSelectAnswer(item,index2)">
                    <view class="num mr-[10rpx]" :class="{active: item2.xuanzhong}">{{item2.xuhao}}</view>
                    <view>{{item2.val}}</view>
                </view>

            </view>

        </view>
    </view>
    <u-empty v-if="answerList.length==0" class="pt-[100rpx]" icon="empty" text="暂无答题信息"></u-empty>

    <view v-if="answerList.length" class="footer">
        <u-button v-if="false" type="primary" disabled>请先看视频{{userInfo?.uid}}</u-button>
        <u-button v-if="false" type="primary" disabled>参与次数用完了{{userInfo?.uid}}</u-button>
        <u-button v-if="false" type="primary" disabled>已领取过奖励{{userInfo?.uid}}</u-button>
        <u-button v-if="true" type="primary" plain @click="handleBack">返回视频</u-button>
        <u-button v-if="true" type="primary" @click="handleSubmit">提交答案</u-button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { answerApi, getActivityDetailApi } from '../../api';
import useUserStore from '../../stores/user';
import { onLoad } from '@dcloudio/uni-app';
import { debounce, redirect } from '@/utils/common';


const loading = ref(true)

const detail = ref<IActivityDetail>()

// 活动详情
const activityDetail = computed(():IActivityDetail['activity_info']|undefined => {
    return detail.value?.activity_info
})

// 题目列表
const answerList = computed(():IActivityDetail['wentilist'] => {
    return detail.value?.wentilist ?? []
})

// 用户信息
const userInfo = computed(():IActivityDetail['user']|undefined => {
    return detail.value?.user
})

// 存储字段
const storageKey = computed(() => {
    return (key: string) => `${key}_${activityDetail.value?.id}`
})
/**
 * 获取详情
 * @param data 
 */
async function getDetail(data:any) {
  try {
    
    const res = await getActivityDetailApi(data)
    
    detail.value = res.data
    useUserStore().setUserInfo(res.data.user)
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

/**
 * 选择答案
 * @param item 
 * @param index 
 */
function handleSelectAnswer(item:IActivityDetail['wentilist'][0], index: number) {
  item.xuanxiang.forEach((item, i) => {
    item.xuanzhong = i === index ? 1: 0
  })

}

/**
 * 返回
 */
function handleBack() {
  redirect({ 
      url: '/addon/htscrm/pages/video/index', 
      param: { 
          activity_id: activityDetail.value?.id,
      }, 
      mode: 'redirectTo' 
  })
}

/**
 * 提交
 */
const handleSubmit = debounce(async function () {
    const result = answerList.value.map(item => {
      return {
        id: item.id,
        daan: item.xuanxiang.filter(el => el.xuanzhong === 1).map(el => el.xuhao)
      }
    })
    
    const params = { 
      wentilist: JSON.stringify(result),
      activity_id: activityDetail.value?.id, 
      store_id:  userInfo.value?.store_id,
    }
    const res:any = await answerApi(params)
    console.log(res);
    
    if(res.code === 1) {
      redirect({
        url:'/addon/htscrm/pages/answer/result',
        param: res.data,
        mode: 'redirectTo'
      })
    } else {
      uni.showModal({
        title:"提示",
        content:res.msg,
        showCancel:false
      })
    }
})

onLoad((data:any) => {
  getDetail(data)
})
</script>
<style lang="scss" scoped>
.container {
  background-color: #f6f7f8;
  min-height: 100vh;

  .subject {
      padding: 30rpx;
  
      .subject-item {
          padding: 30rpx;
          background-color: #FFF;
          border-radius: 12rpx;
          
          &:not(:last-child) {
              margin-bottom: 30rpx;
          }

          .subject-item-title {
              line-height: 48rpx;
          }
      }

      .option {
        line-height: 60rpx;
        margin-top: 24rpx;
      }

      .num {
          height: 44rpx;
          width: 44rpx;
          border: 2rpx solid #eee;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          font-size: 28rpx;

          &.active {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
          }
      }
  }

  .footer {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .u-button:nth-child(2) {
        margin-left: 30rpx;
      }
  }


  .opacity {
      background-color: rgba(0, 122, 255, 0.5);
      border-color: rgba(0, 122, 255, 0.5);
  }

}
</style>